  <template>
    <div class="common-layout">
      <el-container>
        <el-header style="overflow: hidden;">
          <web_head></web_head>
        </el-header>
        <el-main>
          <div :style="{ minHeight: windowHeight + 'px' }">
            <web_search_logo></web_search_logo>
            <div style="margin-top: 80px;height: 100px; text-align: center;">
              <web_search_box :do-search-handle="doSearch" :model="'skc-center'"></web_search_box>
            </div>
            <web_home_tags :do-search-handle="doSearch"></web_home_tags>
          </div>
          <web_foot></web_foot>
        </el-main>
      </el-container>
    </div>
  </template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import web_head from '../components/web_head.vue';
import web_foot from '../components/web_foot.vue';
import web_search_logo from '../components/web_search_logo.vue';
import web_search_box from '../components/web_search_box.vue';
import web_home_tags from '../components/web_home_tags.vue';
import { useRouter } from 'vue-router';
import farmRoutUtils from '@/hook/farmRoutUtils';

const router = useRouter();
const windowHeight = ref(window.innerHeight - 210);


const updateWindowSize = () => {
  windowHeight.value = window.innerHeight - 210;
};


onMounted(() => {
  window.addEventListener('resize', updateWindowSize);

});

const doSearch = (searchword: { word: string, page: number }) => {
  farmRoutUtils.gotoSearchPage(searchword, router);
}


onUnmounted(() => {
  window.removeEventListener('resize', updateWindowSize);
});

</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
